import React from 'react';
import { Card, Table, Button, Tag } from 'antd';
import { CalendarOutlined } from '@ant-design/icons';
import { type Server, type GPU } from '../types';
import { useGPUStore } from '../stores/gpuStore';

interface ServerCardProps {
  server: Server;
  onReserve: (gpu: GPU) => void;
}

const ServerCard: React.FC<ServerCardProps> = ({ server, onReserve }) => {
  const { getGpuStatus } = useGPUStore();

  const getStatusTag = (gpuId: number) => {
    const status = getGpuStatus(gpuId);
    
    switch (status.status) {
      case 'in-use':
        return <Tag color="red">使用中: {status.user}</Tag>;
      case 'reserved':
        return <Tag color="orange">已预定: {status.user}</Tag>;
      case 'available':
        return <Tag color="green">可用</Tag>;
      default:
        return <Tag color="green">可用</Tag>;
    }
  };

  const gpuColumns = [
    {
      title: 'GPU名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '型号',
      dataIndex: 'model',
      key: 'model',
    },
    {
      title: '显存',
      dataIndex: 'memory',
      key: 'memory',
    },
    {
      title: '状态',
      key: 'status',
      render: (record: GPU) => getStatusTag(record.id)
    },
    {
      title: '操作',
      key: 'action',
      render: (record: GPU) => (
        <Button 
          type="primary" 
          icon={<CalendarOutlined />}
          onClick={() => onReserve(record)}
        >
          预定
        </Button>
      ),
    },
  ];

  return (
    <Card 
      title={`${server.name} - ${server.location}`} 
      style={{ marginBottom: 24 }}
      extra={<Tag color="blue">8张GPU</Tag>}
    >
      <Table 
        dataSource={server.gpus} 
        columns={gpuColumns}
        rowKey="id"
        pagination={false}
      />
    </Card>
  );
};

export default ServerCard;